/**
*Desc: 柱状折线图
*Create by: LIU
*Create time:2024/12/09/15:49
*/
<template>
  <div class="wrapper">
    <!-- 柱状图 -->
    <div ref="barChart" id="barChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {};
  }
  ,computed: {
    computedParams: {
      get() {
        return this.data
      }
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        if (!newValue) return
        const _this = this
        _this.newValue = newValue


        console.log('watch',newValue,this.$refs.barChart)
        // this.myChart.setOption(this.option,true);
        // this.initChart()
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    console.log('mounted',this.$refs.barChart)
    this.initChart()
  },
  methods: {
    initChart() {
      let option = {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '22%',
          containLabel: true
        },
        legend: {
          data: ['井数量', '平均钻遇率'],
          left: '7%',
          top: '5%',
          textStyle: {
            color: "#666666"
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: ['演示', '五宝场', '测试'],
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'

            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#666666"
              }
            },
          },
          {
            type: "value",
            name: "百分比",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666"
              }
            }
          }
        ],
        series: [
          {
            name: '井数量',
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#29acff'},
                  {offset: 1, color: '#4bdfff'}
                ]),
                barBorderRadius: 6,
              },
            },
            data: [355, 500, 300]
          },
          {
            name: '调解失败',
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#3d93f2'},
                  {offset: 1, color: '#5dc1fd'}
                ]),
                barBorderRadius: 6,
              }

            },
            data: [400, 500, 500]
          },
          {
            name: '调解终止',
            type: 'bar',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#01c871'},
                  {offset: 1, color: '#55f49c'}
                ]),
                barBorderRadius: 6,
              }
            },
            data: [400, 600, 700]
          },
          {
            name: "平均钻遇率",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#ffa43a',
                borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
                borderWidth: 5
              },

            },
            lineStyle: {
              color: "#ffa43a"
            },

            data: [4.2, 3.8, 4.8]
          }
        ]
      };

      let chartDom = this.$refs["barChart"];
      let myChart = echarts.init(chartDom, {
        renderer: 'canvas',
        useDirtyRect: false
      })
      myChart.setOption(option);

      myChart.on("click", function (params) {
        if (params.componentType === "series") {
          var dataIndex = params.dataIndex; // 获取点击的数据索引
          var data = option.series[params.seriesIndex].data[dataIndex]; // 获取点击的数据对象
          console.log(params.dataIndex, params.seriesIndex, data);
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  #barChart {
    width: 100%;
    height: 100%;
  }
}
</style>